<template>
  <!-- 经手人管理:Hands_on_management -->
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <el-form
        :inline="true"
        @keyup.enter.native="searchQuery"
        style="margin: 20px"
      >
        <el-form-item label="姓名：">
          <el-input
            placeholder="请输入姓名查询"
            v-model="queryParam.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-select
            placeholder="请选择类型查询"
            v-model="queryParam.type"
            style="width: 280px; height: 15px"
          >
            <el-option label="业务员" value="业务员"></el-option>
            <el-option label="仓管员" value="仓管员"></el-option>
            <el-option label="财务员" value="财务员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          style="margin-left: 30px; overflow: hidden"
          class="table-page-search-submitButtons"
        >
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button style="margin-left: 8px" @click="searchReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table-operator" style="margin-top: -15px; margin-left: 20px">
      <el-button type="primary" @click="handlAdd" icon="el-icon-plus">新增</el-button>
      &nbsp;
      <el-dropdown>
        <el-button style="margin-left:10px;">
          批量操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-delete" @click.native="batchDel">删除</el-dropdown-item>
          <el-dropdown-item icon="el-icon-success" @click.native="enableClick('true')">启用</el-dropdown-item>
          <el-dropdown-item icon="el-icon-error" @click.native="enableClick('false')">禁用</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table :data="personList" style="width: 97%;margin:20px;" border="1" @selection-change="handleSelectionChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column
          type="index"
          width="110"
          label="#"
        ></el-table-column>
        <el-table-column width="220" prop="name" label="姓名">
        </el-table-column>
        <el-table-column width="220" prop="type" label="类型">
        </el-table-column>
        <el-table-column width="220" prop="sort" label="排序">
        </el-table-column>
        <el-table-column width="220" prop="enable" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.enabled" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
            <el-button type="text" @click="remove(scope.row)" icon="el-icon-delete" style="color: red;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <el-dialog title="经手人管理" :before-close="handleClose" :visible.sync="dialogFormVisible" width="600px">
        <el-form :model="form" size="mini" :rules="rules" ref="form">
            <el-form-item label="姓名:" prop="name" label-width="90px">
                <el-input v-model="form.name" style="width: 400px" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="类型:" label-width="90px" prop="type">
              <el-select
                placeholder="请选择类型"
                v-model="form.type"
                style="width: 400px;"
              >
                <el-option label="业务员" value="业务员"></el-option>
                <el-option label="仓管员" value="仓管员"></el-option>
                <el-option label="财务员" value="财务员"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序:" label-width="90px">
                <el-input v-model="form.sort" style="width: 400px" placeholder="请输入排序"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="canle('form')">取 消</el-button>
            <el-button type="primary" @click="submitInOutItem('form')">确 定</el-button>
        </div>
    </el-dialog>

    </div>
  </div>
</template>

<script>
import personApi from "@/api/person";

export default {
  data() {
    return {
      queryParam: {},
      current: 1,
      limit: 5,
      total: 0,
      personList: [],
      multipleSelection: [],
      dialogFormVisible: false,
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在2到30个字符', trigger: 'blur' },
          { validator: this.checkIsNameAndTypeExist, trigger: 'blur'}
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ]
      },
      item: {}
    };
  },
  created() {
    this.list()
  },
  methods: {
    handleClose(){
      this.$refs['form'].resetFields()
      this.form = {}
      this.dialogFormVisible = false
    },
    checkIsNameAndTypeExist(rule, value, callback){
      personApi.checkPersonByName(this.form.name)
        .then(res => {
          if(res.status){
            callback('姓名已存在')
          } else {
            callback()
          }
        })
    },
    submitInOutItem(form){
      if (this.form.id === undefined) {
        this.$refs[form].validate(valid => {
          if (valid) {
            personApi.savePerson(this.form)
              .then(res => {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.dialogFormVisible = false
                this.form = {}
                this.$refs['form'].clearValidate()
                this.list()
              })
          }
        })
      } else {
        personApi.editPerson(this.form)
          .then(res => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.dialogFormVisible = false
            this.form = {}
            this.$refs['form'].clearValidate()
            this.list()
          })
      }
    },
    handlAdd() {
      this.dialogFormVisible = true
      this.form.id = undefined
    },
    list() {
      personApi
        .listPage(this.current, this.limit, this.queryParam)
        .then((res) => {
          this.personList = res.data.records
          this.current = res.data.current
          this.limit = res.data.size
          this.total = res.data.total
        })
    },
    searchReset(){
            this.queryParam = {}
    },
    handleSelectionChange(val){
        this.multipleSelection = val
    },
    searchQuery(){
        this.list()
    },
    handleCurrentChange(val){
        this.current = val
        this.list()
    },
    handleSizeChange(val){
        this.limit = val
        this.list()
    },
    batchDel(){
        if(this.multipleSelection==""){
                this.$message.warning('请至少选择一条数据进行删除！')
            }else{
                this.$confirm('此操作将永久删除该权限，是否继续？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning',
                    center: true
                }).then(()=>{
                    // 声明空数组,这里的数组是后端需要的数据
                    let arrray=[]
                    //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
                    for(let i=0;i<this.multipleSelection.length;i++){
                        arrray.push(this.multipleSelection[i].id)//把取出的对象push到数组里
                    }
                    personApi.batchDelById(arrray).then(res=>{ //接口
                        this.$message({
                          type: 'success',
                          message: '操作成功'
                        })
                        this.list()//删完成功后初始化查询列表
                    })
                })
            }
    },
    enableClick(status){
        this.$confirm('是否修改状态?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let arrray=[]
            //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
            for(let i=0;i<this.multipleSelection.length;i++){
                arrray.push(this.multipleSelection[i].id)//把取出的对象push到数组里
            }
            personApi.batchUpdateById(status,arrray)
                .then(res => {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    })
                    this.list()
                })
        })
    },
    remove(row){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                personApi.delById(row.id)
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.list()
                    })
            })
    },
    edit(row){
      this.form = Object.assign({},this.item,row)
      this.dialogFormVisible = true
    },
    canle(form){
      this.$refs[form].resetFields()
      this.dialogFormVisible = false
      this.form = {}
    }
  },
}
</script>

<style></style>
